<template>
    <transition name="slider">
        <div class="game-detail">
            <m-header :canreturn=true :type="1" :titleText=titleText :down="down" @confirm="goDownPage"></m-header>
            <div class="g-d-box" v-show="!showFirstInloading" ref="gamedetail">
                <scroll class="g-d-wrapper" :listenScroll=true :pullUpLoad=pullUpLoad :data=data @pullingUp='getMoreComment'>
                    <div>
                        <div class="item">
                            <div class="icon">
                                <img :src="gameInfo.icon" alt="">
                            </div>
                            <div class="item-content">
                                <h3>{{gameInfo.name}}</h3>
                                <div class="star">
                                    <p class="score lightblue">
                                        <span v-for="(gameType,index) in gameInfo.tagNames" :key=index style="margin-right:3px;">{{gameType}}</span>
                                    </p>
                                    <p class="score">{{gameInfo.downloads}}人下载 | {{gameInfo.size}}MB</p>
                                </div>
                            </div>
                            <div class="like" @click="favorite" :class="{n:!gameInfo.followStatus,c:gameInfo.followStatus}"></div>
                        </div>
                        <div class="g-d-intro-box">
                            <div class="intro">
                                <h3>游戏介绍:</h3>
                                <p>{{gameInfo.description}}</p>
                                <div class="slider-warpper" ref="sliderWrapper" v-show="gameInfo.image">
                                    <div class="slider-box" ref="sliderBox">
                                        <img :src="gameimgdesc" alt="" v-for="(gameimgdesc,index) in gameInfo.image" :key=index>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="servedetail" @click="showServer">
                            <div class="serverbtn">
                                <img src="./kfxq.png" alt="">
                            </div>
                        </div>
                        <div class="rate">
                            <h3>评价</h3>
                            <div class="ratebox">
                                <div class="gamerate">
                                    <p class="ratedesc">游戏评分</p>
                                    <p class="ratescore">
                                        {{commentScore.avgScore}}
                                    </p>
                                </div>
                                <div class="gamescore">
                                    <div class="scoreitem">
                                        5
                                        <span><img src="./star.png" alt=""></span>
                                        <div class="box">
                                            <span :style="{ width: star.starFive+'%'}" v-show="star.starFour"></span>
                                        </div>
                                    </div>
                                    <div class="scoreitem">
                                        4
                                        <span><img src="./star.png" alt=""></span>
                                        <div class="box">
                                            <span :style="{ width: star.starFour+'%'}" v-show="star.starFour"></span>
                                        </div>
                                    </div>
                                    <div class="scoreitem">
                                        3
                                        <span><img src="./star.png" alt=""></span>
                                        <div class="box">
                                            <span :style="{ width: star.starThree+'%'}" v-show="star.starThree"></span>
                                        </div>
                                    </div>
                                    <div class="scoreitem">
                                        2
                                        <span><img src="./star.png" alt=""></span>
                                        <div class="box">
                                            <span :style="{ width: star.starTwo+'%'}" v-show="star.starTwo"></span>
                                        </div>
                                    </div>
                                    <div class="scoreitem">
                                        1
                                        <span><img src="./star.png" alt=""></span>
                                        <div class="box">
                                            <span :style="{ width: star.starOne+'%'}" v-show="star.starOne"></span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="comment">
                            <div class="total">
                                游戏点评
                                <span>
                                    ({{comments.total}})
                                </span>
                            </div>
                            <div class="c-item" v-for="(comment,index) in comments.list" :key=index :data-id='comment.id'>
                                <div class="userinfo">
                                    <div class="avatar">
                                        <img :src="comment.avatar" alt="">
                                    </div>
                                    <div class="nameinfo">
                                        <p class="name">{{comment.nickname}}</p>
                                        <div class="star-wrapper">
                                            <span class="star-icon" :style="{width:comment.star*20+'%'}"></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="c-content">
                                    {{comment.content}}
                                </div>
                                <div class="c-bottom">
                                    <div class="c-date">{{comment.created_at}}</div>
                                    <div class="c-praise">
                                        <span class="praise">{{comment.up}}</span>
                                        <span class="subcomment" @click="goCommentDetail(comment.id)">{{comment.reply}}</span>
                                    </div>
                                </div>
                                <div class="firstsub" v-if="comment.replyInfo">
                                    <span>{{comment.replyInfo.nickname}} :</span>
                                    <span>{{comment.replyInfo.content}}</span>
                                </div>
                            </div>
                            <div class="loading-container ">
                                <loading :title=commentLoadingText v-show="showCommentLoading"></loading>
                            </div>
                        </div>
                    </div>
                </scroll>
                <div class="g-d-comment">
                    <div class="desc">
                        <span class="icon downmanger"></span>
                        <p>管理</p>
                    </div>
                    <span class="downlgame" @click="downGame" ref="download">下载</span>
                    <div class="desc">
                        <span class="icon comment" @click="goPublishPage"></span>
                        <p>评论</p>
                    </div>
                </div>
            </div>
            <mask-common :showMask="showMask" @mask="hideMask" :maskInfo="maskInfo"></mask-common>
            <div class=" loading-firstin " v-show="showFirstInloading ">
                <loading></loading>
            </div>
            <router-view></router-view>
        </div>
    </transition>
</template>

<script type="text/ecmascript-6">
import BSscroll from 'better-scroll';
import MHeader from 'components/m-header/m-header';
import Scroll from '@/base/scroll/scroll';
import Loading from '@/base/loading/loading';
import MaskCommon from '@/base/maskcommon/maskcommon';
import { getCommonInfo, getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';
import { addDownLoadTask, getFileName, checkApp, checkTaskIsExist } from 'common/js/deviceUtil';
import { mapGetters } from 'vuex';

export default {
    data() {
        return {
            titleText: '游戏详情',
            commentLoadingText: null,
            showCommentLoading: false,
            showFirstInloading: true,
            commentScore: {},
            comments: {},
            gameInfo: {},
            filename: '',
            down: true,
            sliderWrapperWidth: 0,
            pullUpLoad: true, // 是否监听上拉
            data: 0, // 通知scroll组件 更新上拉状态
            showMask: false,
            maskInfo: {
                content: '',
                btn: [],
            },
        };
    },
    created() {
        this.id = this.$route.params.gameid;
        this.commentAddress = this.$route.query.commentAddress;
        console.log(this.commentAddress);
        this._getCommonInfo();
        // 在不同的回调函数里共享一些数据的时候，将共享数据挂载在这个对象上
        this.touch = {};
        this.star = {};
    },
    mounted() {
        if (!this.$refs.sliderWrapper) {
            return;
        }
        this.scroll = new BSscroll(this.$refs.sliderWrapper, {
            click: false,
            momentum: true,
            bounce: true,
            scrollX: true,
        });
        this.$refs.gamedetail.style.top = (44 + parseInt(this.statusbar)) + 'px';
    },
    methods: {
        goCommentDetail(commentId) {
            this.$router.push({
                path: `${this.commentAddress}/${this.id}/comment/${commentId}`,
                params: {
                    commentId,
                },
                query: {
                    commentId,
                },
            });
        },
        goDownPage() {
            this.$router.push(`${this.commentAddress}/${this.id}/down`);
        },
        favorite() {
            if (this.getLoginState) {
                const address = `/game/follow/${this.id}?token=${this.getToken}`;
                getCommonInfo(address).then(() => {
                    this.gameInfo.followStatus = !this.gameInfo.followStatus;
                });
            } else {
                this.showMask = true;
                this.maskInfo.content = '用户未登录';
                this.maskInfo.btn[0] = {
                    btnTitle: '知道了',
                    type: 'hide',
                };
                this.maskInfo.btn[1] = {
                    btnTitle: '去登录',
                    type: 'login',
                };
            }
        },
        //  跳转游戏评论页
        goPublishPage() {
            if (this.getLoginState) {
                this.$router.push({
                    path: `${this.commentAddress}/${this.id}/publish`,
                    query: {
                        gameid: this.id,
                    },
                });
            } else {
                this.showMask = true;
                this.maskInfo.content = '用户未登录';
                this.maskInfo.btn[0] = {
                    btnTitle: '知道了',
                    type: 'hide',
                };
                this.maskInfo.btn[1] = {
                    btnTitle: '去登录',
                    type: 'login',
                };
            }
        },
        //  获取游戏详情及评论信息;
        _getCommonInfo() {
            const address = `/game/info/${this.id}?token=${this.getToken}`;
            getCommonInfo(address).then((res) => {
                console.log(res);
                this.showFirstInloading = false;
                this.commentScore = res.data.commentScore;
                this.comments = res.data.comments;
                this.gameInfo = res.data.gameInfo;
                this.$refs.sliderBox.style.width = this.gameInfo.image.length * 130 + 'px';
                this.sliderWrapperWidth = this.gameInfo.image ? this.gameInfo.image.length * 130 : 0;
                this.star.starOne = this.commentScore.list[1].count === 0 ? 0 : Math.floor(this.commentScore.list[1].count / this.comments.total * 100);
                this.star.starTwo = this.commentScore.list[2].count === 0 ? 0 : Math.floor(this.commentScore.list[2].count / this.comments.total * 100);
                this.star.starThree = this.commentScore.list[3].count === 0 ? 0 : Math.floor(this.commentScore.list[3].count / this.comments.total * 100);
                this.star.starFour = this.commentScore.list[4].count === 0 ? 0 : Math.floor(this.commentScore.list[4].count / this.comments.total * 100);
                this.star.starFive = this.commentScore.list[5].count === 0 ? 0 : Math.floor(this.commentScore.list[5].count / this.comments.total * 100);
                let name = getFileName(this.gameInfo.android);
                this.filename = name;
                this._showDownText(this.filename, this.gameInfo.package_name);
            });
        },
        getMoreComment() {
            const moreContentUrl = `/game/comments/list/${this.id}`;
            let commentData = {
                page: this.comments.currentPage + 1,
            };
            if (this.comments.currentPage * this.comments.pageSize < this.comments.total) {
                this.showCommentLoading = true;
                getCommonInfoHasData(moreContentUrl, commentData).then((res) => {
                    console.log(res);
                    this.comments.currentPage = res.data.currentPage;
                    this.comments.list = this.comments.list.concat(res.data.list);

                    /*  *************************************************************************************
                     * 改变data值，通知scroll组件更新pullup状态，隐藏加载框
                     * ***********************************************************************************  */
                    this.data += 1;
                    this.showCommentLoading = false;
                });
            } else {
                console.log('没有更多数据');
            }
        },
        hideMask() {
            this.showMask = false;
        },
        // 展示开服信息
        showServer() {
            console.log(this.commentAddress);
            this.$router.push({
                path: `${this.commentAddress}/${this.id}/newserver`,
                query: {
                    id: this.id,
                },
            });
        },
        downGame() {
            console.log('下载游戏');
            let text = this.$refs.download.innerHTML;
            if (text === '下载') {
                addDownLoadTask(this.gameInfo.android, this.gameInfo.icon, this.gameInfo.package_name);
            } else if (text === '安装') {
                plus.runtime.install(`_downloads/${this.filename}`, {}, () => {
                    if (checkApp(this.gameInfo.package_name)) {
                        this.$refs.download.innerHTML = '打开';
                    }
                }, () => {
                    console.log('安装失败');
                });
            } else if (text === '打开') {
                if (plus.runtime.isApplicationExist({ pname: this.gameInfo.package_name })) {
                    //  安装=>启动应用
                    if (plus.os.name === 'Android') {
                        plus.runtime.launchApplication({
                            pname: this.gameInfo.package_name,
                        }, () => {
                            console.log('打开失败');
                        });
                    }
                }
            } else if (text === '下载中···') {
                plus.downloader.enumerate((tasks) => {
                    console.log(tasks);
                    for (let i = 0; i < tasks.length; i++) {
                        let task = tasks[i];
                        if (`_downloads/${this.filename}` === task.filename) {
                            task[i].pause();
                        }
                    }
                }, 3);
            } else if (text === '继续下载') {
                plus.downloader.enumerate((tasks) => {
                    console.log(tasks);
                    for (let i = 0; i < tasks.length; i++) {
                        let task = tasks[i];
                        if (`_downloads/${this.filename}` === task.filename) {
                            task.pause();
                            task.resume();
                        }
                    }
                }, 5);
            }
        },
        _showDownText(fileN, packN) {
            // 判断是否文件
            checkTaskIsExist(fileN, () => {
                // 如果是文件 判断是否在下载完成列表里;
                console.log('是文件呢~');
                plus.downloader.enumerate((tasks) => {
                    console.log(tasks);
                    for (let i = 0; i < tasks.length; i++) {
                        let task = tasks[i];
                        if (`_downloads/${fileN}` === task.filename) {
                            console.log('下载完了呢~');
                            this.$refs.download.innerHTML = '安装';
                            return;
                        }
                    }
                }, 4);
                plus.downloader.enumerate((tasks) => {
                    console.log(tasks);
                    for (let i = 0; i < tasks.length; i++) {
                        let task = tasks[i];
                        if (`_downloads/${fileN}` === task.filename) {
                            if (task.state === 3) {
                                console.log('还没下载完~');
                                this.$refs.download.innerHTML = '下载中···';
                            }
                            if (task.state === 5) {
                                console.log('暂停了~');
                                this.$refs.download.innerHTML = '继续下载';
                            }
                            return;
                        }
                    }
                });
                if (checkApp(packN)) {
                    console.log('是app');
                    this.$refs.download.innerHTML = '打开';
                }
            }, () => {
                // 如果不是文件。则显示下载;
                console.log('不是文件吗:~');
                this.$refs.download.innerHTML = '下载';
            });
        },
    },
    watch: {
        back() {
            console.log('监听到back了，做操作吧小伙子');
            this._getCommonInfo();
        },
        done() {
            console.log('监听到none了，做操作吧小伙子');
            this.$refs.download.innerHTML = '安装';
        },
    },
    computed: {
        ...mapGetters(['getToken', 'getLoginState', 'statusbar', 'back', 'done']),
    },
    components: {
        MHeader,
        Scroll,
        Loading,
        MaskCommon,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.game-detail {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-background;
    background: #f2f2f2;

    .g-d-box {
        position: absolute;
        top: 44px;
        bottom: 60px;
        width: 100%;

        .g-d-wrapper {
            height: 100%;
            overflow: hidden;

            .item {
                display: flex;
                align-items: center;
                height: 120px;
                padding-top: 1px;
                box-sizing: border-box;
                position: relative;
                text-decoration: none;
                box-shadow: 0 3px 3px #cecece;
                padding: 0 15px;
                background: #ffffff;

                .icon {
                    height: 90px;
                    width: 90px;

                    img {
                        height: 100%;
                    }
                }

                .item-content {
                    height: 90px;
                    margin-left: 14px;
                    padding-top: 30px;

                    h3 {
                        font-size: $font-size-large;
                        margin: 2px;
                        color: #333333;
                    }

                    .star {
                        .star-wrapper {
                            width: 50px;
                            display: inline-block;
                            height: 10px;
                            position: relative;
                            overflow: hidden;
                        }

                        .score {
                            font-size: $font-size-small;
                            padding: 4px 0;
                            color: $color-font;

                            &.lightblue {
                                color: #00b5bf;
                            }
                        }
                    }
                }

                .like {
                    position: absolute;
                    top: 14%;
                    right: 15px;
                    width: 16px;
                    height: 14px;
                    background: red;

                    &.c {
                        background: url('./xin-red.png') no-repeat;
                        background-size: 16px 14px;
                    }

                    &.n {
                        background: url('./xin.png') no-repeat;
                        background-size: 16px 14px;
                    }
                }
            }

            .g-d-intro-box {
                margin-top: 15px;
                padding: 15px;
                background: #ffffff;
                box-shadow: 0 3px 3px #cecece;

                h3 {
                    font-size: $font-size-medium-x;
                    color: #222222;
                    font-weight: bold;
                    padding-bottom: 10px;
                }

                p {
                    font-size: $font-size-small;
                    line-height: 16px;
                    text-indent: 24px;
                    padding-bottom: 15px;
                }

                .slider-warpper {
                    height: 170px;
                    min-width: 320px;
                    position: relative;
                    overflow: hidden;

                    .slider-box {
                        box-sizing: border-box;
                        display: flex;
                        height: 100%;
                        max-width: 650px;

                        img {
                            height: 100%;
                            width: 120px;
                            margin-right: 10px;
                        }
                    }
                }
            }

            .servedetail {
                width: 100%;
                height: 64px;
                background: red;
                margin-bottom: 15px;
                background: url('./serverbg.png') no-repeat;
                display: flex;
                align-items: center;

                .serverbtn {
                    height: 28px;
                    width: 82px;
                    margin: 0 auto;

                    img {
                        height: 100%;
                    }
                }
            }

            .rate {
                margin-top: 15px;
                box-shadow: 0 3px 3px #cecece;
                background: #ffffff;
                width: 100%;
                height: 140px;

                h3 {
                    font-size: $font-size-medium-x;
                    color: #555555;
                    text-align: center;
                    border-bottom: 1px solid #cccccc;
                    line-height: 29px;
                }

                .ratebox {
                    height: 110px;
                    display: flex;
                    align-items: center;
                    margin-left: 30px;

                    .gamerate {
                        width: 64px;
                        height: 78px;
                        text-align: center;

                        .ratedesc {
                            line-height: 28px;
                            font-size: $font-size-small;
                            color: #ffffff;
                            background: #0ec486;
                            border-top-left-radius: 6px;
                            border-top-right-radius: 6px;
                        }

                        .ratescore {
                            line-height: 48px;
                            border: 1px solid #cccccc;
                            border-top: none;
                            border-bottom-left-radius: 6px;
                            border-bottom-right-radius: 6px;
                        }
                    }

                    .gamescore {
                        height: 84px;
                        width: 180px;
                        margin-left: 30px;
                        font-size: $font-size-small;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .scoreitem {
                            display: flex;
                            align-items: center;

                            span {
                                display: block;
                                padding-left: 4px;
                                padding-right: 8px;

                                img {
                                    width: 12px;
                                    height: 12px;
                                }
                            }

                            .box {
                                height: 10px;
                                width: 160px;
                                box-sizing: border-box;
                                border-radius: 5px;
                                border: 1px solid #cccccc;
                                position: relative;

                                span {
                                    position: absolute;
                                    left: 0;
                                    height: 100%;
                                    background: #0ec486;
                                    border-radius: 5px;
                                }
                            }
                        }
                    }
                }
            }

            .comment {
                margin-top: 15px;
                width: 100%;

                .total {
                    height: 40px;
                    width: 100%;
                    line-height: 40px;
                    color: #222222;
                    background: #ffffff;
                    border-bottom: 1px solid #cccccc;
                    padding-left: 15px;
                    font-size: $font-size-medium-x;

                    span {
                        font-size: $font-size-small;
                        color: #00b5bf;
                    }
                }

                .c-item {
                    padding: 0 15px 10px 15px;
                    margin-bottom: 10px;
                    box-shadow: 0 2px 5px #d1d0d0;
                    min-height: 100px;
                    background: #ffffff;

                    .userinfo {
                        display: flex;
                        align-items: center;
                        height: 56px;

                        .avatar {
                            width: 36px;
                            height: 36px;
                            border-radius: 50%;
                            overflow: hidden;

                            img {
                                width: 100%;
                            }
                        }

                        .nameinfo {
                            margin-left: 6px;
                            font-size: $font-size-small;

                            .star-wrapper {
                                star();
                            }
                        }
                    }

                    .c-content {
                        text-indent: 24px;
                        line-height: 18px;
                        font-size: $font-size-small;
                        max-height: 72px;
                        overflow: hidden;
                    }

                    .c-bottom {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        font-size: $font-size-small;
                        padding: 10px 0;
                        color: #777777;

                        .c-praise {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            width: 25%;
                            padding-right: 12px;

                            .praise {
                                width: 18px;
                                height: 14px;
                                display: block;
                                bg-image('parise');
                                background-size: 14px 14px;
                                background-repeat: no-repeat;
                                padding-left: 16px;
                                line-height: 14px;
                            }

                            .subcomment {
                                display: block;
                                width: 14px;
                                height: 14px;
                                bg-image('comment');
                                background-size: 14px 14px;
                                background-repeat: no-repeat;
                                padding-left: 16px;
                                line-height: 14px;
                            }
                        }
                    }

                    .firstsub {
                        padding: 10px 0;
                        background: #f5fdfa;
                        font-size: $font-size-small;
                        line-height: 18px;
                    }
                }
            }
        }

        .g-d-comment {
            position: fixed;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-items: center;
            width: 100%;
            box-sizing: border-box;
            justify-content: space-between;
            bottom: 0;
            height: 50px;
            background: #e6e6e6;

            .desc {
                font-size: $font-size-small;
                color: #ffc400;
                width: 15%;

                .icon {
                    display: block;
                    width: 22px;
                    height: 22px;
                    margin: 0 auto;

                    &.downmanger {
                        bg-image('guanli');
                        background-size: 22px 22px;
                        background-repeat: no-repeat;
                    }

                    &.comment {
                        bg-image('pinglun');
                        background-size: 22px 22px;
                        background-repeat: no-repeat;
                    }
                }

                p {
                    margin-top: 4px;
                    text-align: center;
                }
            }

            .downlgame {
                display: block;
                height: 40px;
                width: 70%;
                border-radius: 20px;
                background: #ffc400;
                line-height: 40px;
                text-align: center;
                color: #ffffff;
            }
        }
    }

    .loading-firstin {
        loading();
    }
}
</style>
